Rodrigo

Hi, Just use a fromTo instance and invalidateOnRefresh on your ScrollTrigger config: https://codepen.io/GreenSock/pen/QWXWxvq Hopefully this helps. Happy Tweening!

Hi, Besides normalizeScroll you can use ignoreMobileResize in the global ScrollTrigger config: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()#details ScrollTrigger.config({ ignoreMobileResize: true, }); If you don't want to use normalizeScroll() in a desktop setup you can combine it with the isTouch property: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch if (ScrollTrigger.isTouch === 1) { ScrollTrigger.normalizeScroll(true); } Also you can use GSAP MatchMedia as well: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Hopefully this helps. Happy Tweening!

Yeah, as Cassie mentions this is mostly about physics and interaction between elements, which is not really simple. Here is the link to matter.js page, which would be my first attempt at something like this: https://brm.io/matter-js/

Hi @binhng97 and welcome to the GSAP Forums! Sometimes the easiest way to understand what something does, is to see what happens without it and check the difference. If you remove that particular bit from Blake's demo you'll see that the position of both elements is set immediately, so that helps create a sort of delay between the mouse movement and the position being set. Of course there is no duration in this demo since Blake is using GSAP's quickSetter. As far as I can see it sets a different position based on the distance between the last recorded position of the element and the mouse position at the next tick and that particular calculation creates a factor that changes based on the distance the mouse moved since the last tick. Why Blake choose that particular math for this, I couldn't really tell you though, but it does the work 😉 Hopefully this helps. Happy Tweening!

Hi, I'm late to the party here but maybe this demos can help you or another user that comes by this thread: https://codepen.io/GreenSock/pen/mdKWBmm https://codepen.io/GreenSock/pen/LYJavxr Happy Tweening!

Nice work! From my time looking at Blake's demos over a few years I can guarantee you that there is a method that takes care of the grass wind-like motion, which seems to be the update method. Of course you'll have to go through the math of it to see how he's modifying the bezier paths in order to achieve that. Maybe on mouse interaction prevent that update method and use a modified version of it that takes into account the mouse movement. That would be my first crack at it but I can't guarantee you that it would make it work perfectly though, just an idea as Cassie mentions. Happy Tweening!

No problemo! You're welcome!

Hi, You can use clip path: https://codepen.io/GreenSock/pen/zYbYjBo https://codepen.io/GreenSock/pen/VwRQoPB Also check this masking/clipping guide created by @mvaneijgen Hopefully this helps Happy Tweening!

Hi, This most likely is caused by that timeout you have in your setup. Any particular reason for that? Why you need to wait 500 ms to create your GSAP instances? If for some reason you need to wait that amount of time (which seems like a very hacky way to solve anything TBH) I'd recommend you to use a GSAP delayedCall instance inside the useGSAP hook. The main reason is that your timeout is still running when you change routes before is completed and that runs all that code, but the elements you're telling GSAP and the Motion Path plugin to look for are not in the DOM, so is quite logical to get that error. Again this stems from that hacky solution you have in place. Using a delayed call inside the useGSAP hook should fix that: https://gsap.com/docs/v3/GSAP/gsap.delayedCall() Hopefully this helps. Happy Tweening!

Hi @ehdigital and welcome to the GSAP Forums! Your demo is using very outdated versions of GSAP and ScrollTrigger (3.11.5) so I'd suggest you to update them to the latest ones (3.12.5). Your HTML/CSS layout seems a bit odd to me, maybe simplify it a bit could help. In that regard as well your ScrollTrigger instances are checking the scroll position in the global window object (the actual default) but it seems that you have a different element creating the overflow and scrolling in your setup (hence my suggestion to simplify it a bit). You can check the scroller property in ScrollTrigger: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#scroller Finally here is a simple demo that uses CSS Snap with ScrollTrigger: https://codepen.io/GreenSock/pen/YzyaKrq Hopefully this helps. Happy Tweening!

Hi, I've read your post a few times and I'm not 100% clear about what you're trying to achieve. My best guess is that you want to pin something horizontally, is that correct? If that's the case, horizontal pinning is not supported, especially if you already have vertical pinning in your ScrollTrigger instance. The only way to achieve that is to create a timeline for the entire horizontal animation and pause the horizontal motion as discussed in this thread: Another option is to use the Container Animation feature in ScrollTrigger to move the element horizontally to emulate pinning. Basically the reason this doesn't work is because pinning already uses position fixed, so nesting an element with position fixed inside a parent with position fixed sound like something that could cause problems as far as I can tell: https://gsap.com/blog/3-8/#containeranimation Hopefully this helps. Happy Tweening!

Hi @valentintt and welcome to the GSAP Forums! We've seen a few issues with Astro's view transitions and there is clearly something that is happening in the way Astro view transitions work that is not properly cleaning up. Unfortunately I don't have any experience with Astro and I haven't been able to get up-to-speed with it in order to play around with the view transitions API and see how to integrate it seamlessly with GSAP. Doing a quick check on Astro's API I found this: https://docs.astro.build/en/guides/view-transitions/#astrobefore-swap I would recommend you to revert all your GSAP and ScrollTrigger instances of the current view and use the page-load event to create your GSAP and ScrollTrigger instances in the new view: https://docs.astro.build/en/guides/view-transitions/#astrobefore-swap For doing all this in a simpler way I recommend you to use GSAP Context: https://gsap.com/docs/v3/GSAP/gsap.context() Hopefully this helps. Happy Tweening!

Hi, I'm not an expert in Svelte/SvelteKit but as far as I can tell the extra config on vite.config.js file. Did you registered the plugins using gsap.registerPlugin() in order to avoid tree shaking? https://gsap.com/docs/v3/GSAP/gsap.registerPlugin() You also might want to check in the file where you're registering the plugin if you are in the browser or server: if (typeof window !== "undefined") { gsap.registerPlugin(Physics2DPlugin, SplitText); } Here is a simple demo: https://stackblitz.com/edit/sveltejs-kit-template-default-unljf6?file=src%2Froutes%2F%2Bpage.svelte Hopefully this helps. Happy Tweening!

Hi @13Seth and welcome to the GSAP Forums! I'm not 100% sure I understand what you're trying to achieve here. If you want to create a content slider I think this should serve as a good starting point: https://codepen.io/GreenSock/pen/MWMgZOv Also this demo by @PointC could help: https://codepen.io/PointC/pen/YRzRyM A content slider is not the simplest thing to achieve, so my recommendation is to start simple and then start adding features to it. Hopefully this helps. Happy Tweening!

I forgot, I recommend you again to use our useGSAP hook as well, it makes cleanup far simpler than the way you're doing it right now: https://gsap.com/resources/React Happy Tweening!